<!--
 * @Author: fanyaqing
 * @Date: 2021-08-05 09:40:54
 * @LastEditTime: 2021-08-15 18:03:31
 * @LastEditors: fanyaqing
 * @Description: 
 * @FilePath: \supermall\src\views\shopcart\shopcart.vue
-->
<template>
  <div class="shop-cart">
    <nav-bar class="cart-nav">
      <div slot="center">购物车({{cartLength}})</div>
    </nav-bar>
    <scroll class="content" ref="scroll">
      <cart-list ref="cartList"></cart-list>
    </scroll>
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>
<script>
import Scroll from 'components/common/scroll/Scroll';
import NavBar from 'components/common/navbar/NavBar';
import CartList from './childComponents/CartList';
import CartBottomBar from './childComponents/CartBottomBar'

import {mapGetters} from 'vuex';
export default {
  components:{
    NavBar,
    CartList,
    CartBottomBar,
    Scroll
  },
  computed:{
    // 使用mapGetters导入，可以直接使用vuex里面getters里的计算属性
    // mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中
    ...mapGetters(['cartLength'])
  },
  activated(){
    //由于进来的时候，carlist的数据还没渲染完成，sroll组件提前运行了，导致scrollerHeight获取错误
    // 需要,在数据加载完成后每次手动,获取一下sroll的refresh方法,重新计算高度
    this.$nextTick(()=>{
      // console.log(this.$refs.scroll.scroll.scrollerHeight)
      this.$refs.scroll.refresh();
    })
  },
  
}
</script>
<style scoped>
.shop-cart{
  padding-top: 44px;
  height:100vh;
  
  position: relative;
}
.cart-nav{
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}
.content{
  overflow: hidden;

  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 49px;
}
</style>